<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<button>我的按钮</button>

		<template class="button-template">
			<style>
				:host {
					font-size: 18px;
					cursor: pointer;
				}
				
				 :host(:hover) {
					border: 2px solid green;
				}
			</style>
			<content></content>
		</template>
		<script>
			var host = document.querySelector('button');
			var root = host.createShadowRoot();
			var template = document.querySelector('.button-template');
			root.appendChild(template.content.cloneNode(true));
		</script>
	</body>

</html>